import React, { useState } from 'react';
const App = () => {
  // 初始数据为空
  const [data, setData] = useState([]);
  // 新增一行
  const addRow = () => {
    const newRow = {
      id: data.length + 1,
      name: '',
      age: '',
      email: '',
    };
    setData([...data, newRow]);
  };
  // 处理下拉框选择
  const handleSelectChange = (id, field, value) => {
    const updatedData = data.map((row) => {
      if (row.id === id) {
        return { ...row, [field]: value };
      }
      return row;
    });
    setData(updatedData);
  };
  // 下拉框选项
  const options = {
    name: ['张三', '李四', '王五'],
    age: ['22', '25', '28', '30'],
    email: ['zhangsan@example.com', 'lisi@example.com', 'wangwu@example.com'],
  };
  return (
    <div style={{ padding: '20px' }}>
      <h1>用户信息表</h1>
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '20px' }}>
        <thead>
          <tr>
            <th style={{ border: '1px solid #ccc', padding: '8px' }}>ID</th>
            <th style={{ border: '1px solid #ccc', padding: '8px' }}>姓名</th>
            <th style={{ border: '1px solid #ccc', padding: '8px' }}>年龄</th>
            <th style={{ border: '1px solid #ccc', padding: '8px' }}>邮箱</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={row.id}>
              <td style={{ border: '1px solid #ccc', padding: '8px' }}>{row.id}</td>
              <td style={{ border: '1px solid #ccc', padding: '8px' }}>
                <select
                  value={row.name}
                  onChange={(e) => handleSelectChange(row.id, 'name', e.target.value)}
                >
                  <option value="">请选择</option>
                  {options.name.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>
              </td>
              <td style={{ border: '1px solid #ccc', padding: '8px' }}>
                <select
                  value={row.age}
                  onChange={(e) => handleSelectChange(row.id, 'age', e.target.value)}
                >
                  <option value="">请选择</option>
                  {options.age.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>
              </td>
              <td style={{ border: '1px solid #ccc', padding: '8px' }}>
                <select
                  value={row.email}
                  onChange={(e) => handleSelectChange(row.id, 'email', e.target.value)}
                >
                  <option value="">请选择</option>
                  {options.email.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button
        onClick={addRow}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '40px',
          height: '40px',
          borderRadius: '50%',
          backgroundColor: '#007bff',
          color: '#fff',
          border: 'none',
          cursor: 'pointer',
          fontSize: '24px',
        }}
      >
        +
      </button>
    </div>
  );
};
export default App;